<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('proManage.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('proManage.amountManage')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ------------ 搜索查询栏结束 -------------- -->
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$t('proManage.finProduct')" name="first">
        <el-row class="list_operation" style="margin-top:0px;">
          <el-button v-if="$store.state.common.permiss.amountlist.includes('add')" type="primary" @click.stop="onAdd">+{{$t('teleMarketing.no21')}}</el-button>
          <!-- <el-button v-if="$store.state.common.permiss.amountlist.includes('implement')" @click.stop="validFn">{{$t('proManage.validRule')}}</el-button> -->
        </el-row>
        <div class="table" v-if="true">
          <el-table :data="tableData" size="small" stripe>
            <el-table-column align="center" prop="level" :label="$t('proManage.labelName')"></el-table-column>
            <el-table-column align="center" :label="$t('proManage.countRepayment')">
              <template slot-scope="scope">
                <span>{{scope.row.countRepaymentStart}}~{{scope.row.countRepaymentEnd}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('proManage.maxOverdue')">
              <template slot-scope="scope">
                <span>{{scope.row.maxOverdueStart}}~{{scope.row.maxOverdueEnd}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="operation" :label="$t('public.operation')">
              <template slot-scope="scope">
                <span
                  v-if="$store.state.common.permiss.amountlist.includes('edit')"
                  class="table_opr"
                  @click="onEdit(scope.row)"
                >{{$t('public.no51')}}</span>
                <span class="table_opr" v-if="$store.state.common.permiss.amountlist.includes('del')" @click="onDel(scope.row.id)">{{$t('idManage.del')}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row type="flex" justify="end">
          <div class="pages" >
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pagination.current"
              layout="sizes, prev, pager, next, total,->"
              :page-sizes="pagination.pageSizeOptions"
              :page-size="pagination.pageSize"
              @size-change="handleSizeChange"
              :total="pagination.total">
            </el-pagination>
          </div>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="$t('public.addEdit')" :visible.sync="addVisible" width="600px">
      <el-form
        :model="addForm"
        size="small"
        status-icon
        :rules="rules"
        ref="addForm"
        label-width="120px"
        class="demo-ruleForm">
        <el-form-item :label="$t('proManage.labelName')" prop="level">
          <el-input v-model="addForm.level" auto-complete="off" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.labelType')">
           <el-radio-group v-model="addForm.type">
            <el-radio label="1">{{$t('proManage.finProduct')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
            <el-col :span="15">
                <el-form-item :label="$t('proManage.countRepayment')" prop="countRepaymentStart">
                <el-input v-model="addForm.countRepaymentStart" auto-complete="off" class="swidth"></el-input>
                <span v-text="text"></span>
                </el-form-item>      
            </el-col>
            <el-col :span="9">
                <el-form-item label-width="0" prop="countRepaymentEnd">
                <el-input v-model="addForm.countRepaymentEnd" auto-complete="off" class="swidth"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="15">
                <el-form-item :label="$t('proManage.maxOverdue')" prop="maxOverdueEnd">
                <el-input v-model="addForm.maxOverdueEnd" auto-complete="off" class="swidth"></el-input>
                <span v-text="text"></span>
                </el-form-item>      
            </el-col>
            <el-col :span="9">
                <el-form-item label-width="0" prop="maxOverdueStart">
                <el-input v-model="addForm.maxOverdueStart" auto-complete="off" class="swidth"></el-input>
                </el-form-item>
            </el-col>
            <el-alert  type="warning" :title="$t('proManage.alert.no6')" :closable='false'>
            </el-alert> 
        </el-row>
        <el-form-item class="mt20"> 
          <el-button type="primary" @click="submitForm('addForm')">{{$t('public.no41')}}</el-button>
          <el-button @click="close">{{$t('public.no50')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="$t('proManage.validResult')" :visible.sync="validVisible" width="600px">
        <el-alert  type="warning" :closable='false'>
          <p>{{$t('proManage.alert.no3')}}</p>
          <p>{{$t('proManage.alert.no4')}}</p>
          <p>{{$t('proManage.alert.no5')}}</p>
        </el-alert>
        <p class="tt">{{$t('proManage.coincidence')}}</p>
         <el-table :data="tableData" size="small" v-loading="validLoading">
          <el-table-column align="center" prop="level" :label="$t('proManage.countRepayment')"></el-table-column>
          <el-table-column align="center" prop="level" :label="$t('proManage.maxOverdue')"></el-table-column>
         </el-table>
         <p class="tt">{{$t('proManage.uncovered')}}</p>
         <div v-loading="validLoading"></div>
         <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="validVisible = false">{{$t('public.no49')}}</el-button>
        </span>
    </el-dialog>
    <div class="foot"></div>
  </div>
</template>
<script>
export default {
  data() {
    let limit=(rule, value, callback) => {
      if (value < 0) {
        callback(new Error(this.$t('long.no20')+0))
      } else {
        callback()
      }
    }
    return {
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      tableData: [], // 用户信息数据模拟
      addVisible: false,
      validVisible:false,
      partnerNo:'',
      partnerName:'',
      text:'<=value<=',
      activeName:'first',
      validLoading:true,
      addForm: {
        id:'',
        level:'',
        type:'1',
        countRepaymentStart:'',
        countRepaymentEnd:'',
        maxOverdueStart:'',
        maxOverdueEnd:'',
      },
      rules: {
        level:[
          {required: true,message: this.$t("login.required"),trigger: "blur"} 
        ],
        countRepaymentStart:[
          {required: true,message: this.$t("login.required"),trigger: "blur"},
          {required: true,validator: limit,trigger: "blur"}
        ],
        countRepaymentEnd:[
          {required: true,message: this.$t("login.required"),trigger: "blur"},
          {required: true,validator: limit,trigger: "blur"}
        ],
        maxOverdueStart:[
          {required: true,message: this.$t("login.required"),trigger: "blur"},
          {required: true,validator: limit,trigger: "blur"}
        ],
        maxOverdueEnd:[
          {required: true,message: this.$t("login.required"),trigger: "blur"},
          {required: true,validator: limit,trigger: "blur"}
        ]
      }
    };
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    onEdit(row) {
        this.addForm.id=row.id;
        this.addForm.level=row.level;
        this.addForm.type='1';
        this.addForm.countRepaymentStart=row.countRepaymentStart;
        this.addForm.countRepaymentEnd=row.countRepaymentEnd;
        this.addForm.maxOverdueStart=row.maxOverdueStart;
        this.addForm.maxOverdueEnd=row.maxOverdueEnd;
        this.addVisible = true;
    },
    submitForm(formName) {
    let option = {
        param: {
          ...this.addForm
        }       
      }
      let actionUrl=this.addForm.id?this.$action.product_amountUpdate:this.$action.product_amountSave;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.addForm.countRepaymentStart>this.addForm.countRepaymentEnd||this.addForm.maxOverdueEnd>this.addForm.maxOverdueStart)
          {
            this.$globalMsg.error(this.$t('long.no18'))
            return false;
          }
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message);
              this.close();
              this.getTableData();
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    },
    onAdd() {
      this.addForm.id='';
      this.addVisible = true;
    },
    getTableData() {
      // 获取列表数据
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
      };
      this.$axios.post(this.$action.product_amountList, option).then(res => {
          if (res.code == 200) {
            this.partnerName=res.data.partner?res.data.partner.partnerName:"",
            this.partnerNo=res.data.partner?res.data.partner.partnerNo:"",
            this.tableData = res.data.list.list;
            this.pagination.total = res.data.list.total;
          } else {
            this.$globalMsg.error(res.message);
          }
        });
    },
    close() {
      this.addVisible = false;
      this.$refs.addForm.resetFields();
    },
    onDel(id){
      this.$confirm(this.$t('proManage.delAmount'), this.$t('public.del'), {
        type: "warning"
      })
      .then(() => {
        let option = {
          param: {
            id:id
          }       
        }
        this.$axios.post(this.$action.product_amountDel,option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getTableData();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    },
    validFn(){
      this.validVisible = true;
    },
    onExecution(){
      this.$confirm(this.$t('proManage.amountExetip'), this.$t('proManage.amountExe'), {
        type: "warning"
      })
      .then(() => {
        this.$axios.post(this.$action.product_amountExe,{param:{}}).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getTableData();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    }
  },
  mounted() {
    this.getTableData(); 
  }
};
</script>
<style lang="scss" scoped>
.swidth{width:150px;}
.partnerbox{
    background-color: #fff;
    line-height: 30px;
    margin-bottom: 10px;
    padding:10px 20px;
    font-size: 14px;
}
.tt{
  margin:20px 0;
  border-left: 4px solid #409EFF;
  padding-left: 5px;
  font-weight: bold;
}
</style>